<template>
<div>
 <div class="user-top">
</div>
  <div class="user-table">
     <el-table
                border
                class="table"
                :data="data"
                ref="multipleTable"
                header-cell-class-name="table-header" 
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" align="center">
                </el-table-column>
                <el-table-column prop="openid" label="openId" align="center" ></el-table-column>
                <el-table-column label="昵称" prop="name" align="center">
                    <template #default="scope">{{ scope.row.name }}</template>
                </el-table-column>
                <el-table-column label="头像" align="center">
                    <template #default="scope">
                        <el-avatar :src="scope.row.avatar"></el-avatar>                   
                    </template>
                </el-table-column>
                <el-table-column prop="sex" label="性别" align="center">
                   <template #default="scope">
                        {{scope.row.sex==1?'男':'女'}}                
                    </template>
                </el-table-column>
                <el-table-column prop="country" label="国家" align="center">
                   <template #default="scope">
                       {{scope.row.country}}            
                    </template>
                </el-table-column>
                <el-table-column prop="province" label="省" align="center">
                   <template #default="scope">
                       {{scope.row.province}}            
                    </template>
                </el-table-column>
                <el-table-column prop="city" label="城市" align="center">
                   <template #default="scope">
                       {{scope.row.city}}            
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
            </el-table>
             <div class="pagination">
                <el-pagination
                    style="float: right;"
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="user.length"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
  </div>
</div>
</template>

<script>
import {WxUserAll} from '@/api/index'
export default {
      data(){
        return {
          query: {
                search: "",
                pageIndex: 1, //当前页
                pageSize: 5   //页面所显示的条数 写死的
            },
          user:[]
        }
      },
      computed:{
        data(){
          return this.user.slice((this.query.pageIndex-1)*this.query.pageSize,(this.query.pageIndex*this.query.pageSize))
        }
      },
      created(){
         this.getWxUserAll()
      },
      methods:{
        handlePageChange(current){
          this.query.pageIndex=current
          console.log(this.pageIndex)
        },
         getWxUserAll(){
           WxUserAll().then(res=>{

           let wxUser=res.data.all.filter(v=>{
               return v.openid!==null;
             })
            this.user=wxUser
           })
         }
      }
}
</script>

<style>
.user-top{
  display: flex;
}
</style>